<ui:composition		
	  xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:c="http://java.sun.com/jstl/core" >
      
  <style>
  .ui-datatable-odd {
    background: none repeat scroll 0 0 #F2F5F9;
}
.ui-panelgrid tr, .ui-panelgrid td{
  border:none !important;
}

.ui-datatable .ui-datatable-data tr,.ui-datatable .ui-datatable-data-empty tr,.ui-datatable .ui-datatable-data td,.ui-datatable .ui-datatable-data-empty td{
  border:1px solid !important;
}

  </style>
      
     
<h:form id="frmNuevoProyecto" >
	<p:fieldset legend="Opciones" toggleable="true" style="margin-bottom:20px">		
		
		
		
		<p:panelGrid id="panelGridOptions" columns = "8" >
			    <h:outputText value="Equipos :" style="font-weight: bold;"/> 
    			<h:outputText value="Mano de Obra :" style="font-weight: bold;"/>    			
    			<h:outputText value="Materiales :" style="font-weight: bold;" />
    			<h:outputText value="Cliente :" style="font-weight: bold;" />
    			<h:outputText value="" />
    			<h:outputText value="" />
    			<h:outputText value="" />
    			<h:outputText value="" />
			   		   
		   	   	<p:selectOneListbox disabled="#{projectBean.disabled}" ondblclick="simulate('frmNuevoProyecto:addEquipmentButton');" value="#{projectBean.equipment}"  var="i" filter="true" filterMatchMode="contains" converter="itemConverter" scrollHeight="50">
						<f:selectItems value="#{projectBean.equipmentList}" var="item" itemLabel="#{item.modelo}" itemValue="#{item}"/>					
						<p:column>
	  						<h:outputText value="#{i.modelo}" />
						</p:column>					
				</p:selectOneListbox>
				
				<p:selectOneListbox disabled="#{projectBean.disabled}" ondblclick="simulate('frmNuevoProyecto:addManPowerButton');" value="#{projectBean.manPower}"  var="i" filter="true" filterMatchMode="contains" converter="manoObraConverter" scrollHeight="50">
						<f:selectItems value="#{projectBean.manPowerList}" var="manoObra" itemLabel="#{manoObra.cargo}" itemValue="#{manoObra}"/>					
						<p:column>
	  						<h:outputText value="#{i.cargo}" />
						</p:column>					
				</p:selectOneListbox>
			 	
			 	<p:selectOneListbox disabled="#{projectBean.disabled}" ondblclick="simulate('frmNuevoProyecto:addResourceButton');" value="#{projectBean.resource}"  var="i" filter="true" filterMatchMode="contains" converter="materialConverter" scrollHeight="50">
						<f:selectItems value="#{projectBean.resourceList}" var="material" itemLabel="#{material.descripcion}" itemValue="#{material}"/>					
						<p:column>
	  						<h:outputText value="#{i.descripcion}" />
						</p:column>					
				</p:selectOneListbox>
				
				
				<p:selectOneListbox value="#{projectBean.client}"  var="i" filter="true" filterMatchMode="contains" converter="clienteConverter" scrollHeight="50">
						<f:selectItems value="#{projectBean.clientList}" var="cliente" itemLabel="#{cliente.nombre}" itemValue="#{cliente}"/>					
						<p:column>
	  						<h:outputText value="#{i.nombre}" />
						</p:column>					
				</p:selectOneListbox>
				
				<p:treeTable id="projectTree" value="#{projectBean.root}" var="disciplineNode" selectionMode="single" selection="#{projectBean.selectedNode}">
					        <p:ajax event="select" listener="#{projectBean.onNodeSelect}" update=":frmNuevoProyecto:panelGridOptions :frmNuevoProyectoActividades:tabView" />
	                		<f:facet name="header">
					            PROYECTO
					        </f:facet>
					        <p:column headerText="Name">
					            <h:outputText value="#{disciplineNode.name}" />
					        </p:column>				        
					        <p:column headerText="Type">
					            <h:outputText value="#{disciplineNode.type}" />
					        </p:column>
			   	</p:treeTable>
			    
				<p:contextMenu for="panelGridOptions" style="font-size: 12px !important">        			
        			<p:menuitem id="menuItemBorrar" value="Borrar " disabled="#{projectBean.disabledDelete}" actionListener="#{projectBean.deleteNode()}" update="projectTree panelGridOptions" icon="ui-icon-close"/>
        			<p:menuitem id="menuItemNuevo" value="Nuevo" disabled="#{projectBean.disabledNewItem}" actionListener="#{projectBean.createNode()}" update="projectTree panelGridOptions" icon="ui-icon-close"/>
        			<p:menuitem id="menuItemRenombrar" value="Renombrar" disabled="#{projectBean.disabledRename}" oncomplete="PF('renameDialog').show();" update="projectTree" icon="ui-icon-close"/>
        			<p:menuitem id="menuItemActividad" value="Agregar Actividad" disabled="#{projectBean.disabledNewActivity}" actionListener="#{projectBean.createActiviy()}" update="projectTree panelGridOptions :frmNuevoProyectoActividades:tabView" icon="ui-icon-close"/>
    			</p:contextMenu>
     			
    			<p:commandButton id="addResourceButton" type="submit" value="Submit" action="#{projectBean.addResource}" update=":frmNuevoProyectoActividades:tabView" style="display:none" icon="ui-icon-plusthick" />
				<p:commandButton id="addEquipmentButton" type="submit" value="Submit" action="#{projectBean.addEquipment}" update=":frmNuevoProyectoActividades:tabView" style="display:none"  icon="ui-icon-plusthick" /> 
                <p:commandButton id="addManPowerButton" type="submit" value="Submit" action="#{projectBean.addManPower}" update=":frmNuevoProyectoActividades:tabView" style="display:none"  icon="ui-icon-plusthick" />
	  </p:panelGrid>	 

	</p:fieldset>	   	
</h:form>

<h:form id="frmNuevoProyectoActividades">
<h:panelGrid> 
	 <p:growl id="msgs" showDetail="true" />
	 <p:tabView id="tabView" value="#{projectBean.tabActivityList}" var="tabActivity" activeIndex="#{projectBean.activeTab}" >  
	 	<p:ajax event="tabClose" listener="#{projectBean.onTabClose}" update=":frmNuevoProyectoActividades:msgs :frmNuevoProyecto:panelGridOptions"/>
	    <p:ajax event="tabChange" listener="#{projectBean.onTabChange}" update=":frmNuevoProyectoActividades:tabView"/> 
	        <p:tab id="formTab" title="#{tabActivity.nombre}" closable="true">  
	        	<p:fieldset legend="Equipos" toggleable="true" style="margin-bottom:20px">
					<p:dataTable id="equipmentList" var="equipo" value="#{tabActivity.equipmentActivityList}" editable="true" editMode="cell" scrollable="true" scrollHeight="150">
						<f:facet name="header">	
							<h:outputText value="Equipos" style="color: yellow" />          	
						</f:facet>
						<!-- <p:ajax event="cellEdit" listener="#{projectBean.onCellEdit}" update="equipmentList" /> -->
 						
 						<p:column headerText="Id" rendered="false">
              				<h:outputText value="#{equipo.id}" />
          				</p:column>
          				
          				<p:column headerText="Descripcion">
              				<h:outputText value="#{equipo.descripcion}" />
          				</p:column>
          				
          				<p:column headerText="Modelo">
              				<h:outputText value="#{equipo.modelo}" />
          				</p:column>
          				
          				<p:column id="cantidad" headerText="Cantidad">
              				<p:cellEditor>
                  				<f:facet name="output"><h:outputText value="#{equipo.cantidad}" /></f:facet>
                  				<f:facet name="input"><p:inputText value="#{equipo.cantidad}" style="width:100%"/></f:facet>
              				</p:cellEditor>
          				</p:column>
          				
          				<p:column id="tarifa" headerText="Tarifa">
              				<p:cellEditor>
                  				<f:facet name="output"><h:outputText value="#{equipo.tarifa}" /></f:facet>
                  				<f:facet name="input"><p:inputText value="#{equipo.tarifa}" style="width:100%"/></f:facet>
              				</p:cellEditor>
          				</p:column>
          				
          				<p:column id="costoHora" headerText="Costo Hora">
              				<p:cellEditor>
                  				<f:facet name="output"><h:outputText value="#{equipo.costoHora}" /></f:facet>
                  				<f:facet name="input"><p:inputText value="#{equipo.costoHora}" style="width:100%"/></f:facet>
              				</p:cellEditor>
          				</p:column>
          				
          				<p:column id="rendimiento" headerText="Rendimiento">
              				<p:cellEditor>
                  				<f:facet name="output"><h:outputText value="#{equipo.rendimiento}" /></f:facet>
                  				<f:facet name="input"><p:inputText value="#{equipo.rendimiento}" style="width:100%"/></f:facet>
              				</p:cellEditor>
          				</p:column>
          				
          				<p:column id="costoHoraTotal" headerText="Costo">
              				<h:outputText value="#{equipo.costo}" />
          				</p:column>          				
          				
						<p:column headerText="Opciones" style="width:100px">
    						<p:commandLink action="#{projectBean.deleteEquipment(equipo)}" update="equipmentList" ajax="false">
           						<h:outputText value="X"  style="color: orange"/>           					
           					</p:commandLink>
   						</p:column>
   						<p:columnGroup type="footer">
				            <p:row>
				                <p:column colspan="8" style="text-align:right" footerText="Total:" />
				                <p:column footerText="totalin" />				                
				            </p:row>
				        </p:columnGroup> 
					</p:dataTable>
				</p:fieldset>
				<p:fieldset legend="Mano de obra" toggleable="true" style="margin-bottom:20px">
					<p:dataTable id="manPowerList" var="manoDeObra" value="#{tabActivity.manPowerActivityList}" editable="true" editMode="cell" scrollable="true" scrollHeight="150">
						<f:facet name="header">	
							<h:outputText value="Mano de obra" style="color: yellow" />          	
						</f:facet>
						<!-- <p:ajax event="cellEdit" listener="#{projectBean.onCellEdit}" update="manPowerList" /> -->
 						
 						<p:column headerText="Id" rendered="false">
              				<h:outputText value="#{manoDeObra.id}" />
          				</p:column>
          				
          				<p:column headerText="Descripcion">
              				<h:outputText value="#{manoDeObra.descripcion}" />
          				</p:column>
          				
          				<p:column id="cantidad" headerText="Cantidad">
              				<p:cellEditor>
                  				<f:facet name="output"><h:outputText value="#{manoDeObra.cantidad}" /></f:facet>
                  				<f:facet name="input"><p:inputText value="#{manoDeObra.cantidad}" style="width:100%"/></f:facet>
              				</p:cellEditor>
          				</p:column>
          				
          				<p:column id="jornalHora" headerText="Jornal/HR">
              				<p:cellEditor>
                  				<f:facet name="output"><h:outputText value="#{manoDeObra.jornalHora}" /></f:facet>
                  				<f:facet name="input"><p:inputText value="#{manoDeObra.jornalHora}" style="width:100%"/></f:facet>
              				</p:cellEditor>
          				</p:column>
          				
          				<p:column id="costoHora" headerText="Costo Hora">
              				<p:cellEditor>
                  				<f:facet name="output"><h:outputText value="#{manoDeObra.costoHora}" /></f:facet>
                  				<f:facet name="input"><p:inputText value="#{manoDeObra.costoHora}" style="width:100%"/></f:facet>
              				</p:cellEditor>
          				</p:column>
          				
          				<p:column id="rendimiento" headerText="Rendimiento">
              				<p:cellEditor>
                  				<f:facet name="output"><h:outputText value="#{manoDeObra.rendimiento}" /></f:facet>
                  				<f:facet name="input"><p:inputText value="#{manoDeObra.rendimiento}" style="width:100%"/></f:facet>
              				</p:cellEditor>
          				</p:column>
          				
          				<p:column id="costoHoraTotal" headerText="Costo">
              				<h:outputText value="#{manoDeObra.costo}" />
          				</p:column>
          				
						<p:column headerText="Opciones" style="width:100px">
    						<p:commandLink action="#{projectBean.deleteManPower(manoDeObra)}" update="manPowerList" ajax="false">
           						<h:outputText value="X"  style="color: orange"/>           					
           					</p:commandLink>
   						</p:column>
   						<p:columnGroup type="footer">
				            <p:row>
				                <p:column colspan="7" style="text-align:right" footerText="Total:" />
				                <p:column footerText="totalin" />				                
				            </p:row>
				        </p:columnGroup> 
					</p:dataTable>
				</p:fieldset>
				<p:fieldset legend="Materiales" toggleable="true" style="margin-bottom:20px">
	        		<p:dataTable id="resourceList" var="material" value="#{tabActivity.resourceActivityList}" editable="true" editMode="cell" scrollable="true" scrollHeight="150">
						<f:facet name="header">	
							<h:outputText value="Materiales" style="color: yellow" />          	
						</f:facet>
						
						<!-- <p:ajax event="cellEdit" listener="#{projectBean.onCellEdit}" update="resourceList" /> -->
 						
 						<p:column colspan="1" headerText="Id" rendered="false">
              				<h:outputText value="#{material.id}" />
          				</p:column>
          				
          				<p:column colspan="1" headerText="Descripcion">
              				<h:outputText value="#{material.descripcion}" />
          				</p:column>
          				
          				<p:column colspan="1" headerText="Modelo">
              				<h:outputText value="#{material.modelo}" />
          				</p:column>
          				
          				<p:column id="unidad" headerText="Unidad">
              				<p:cellEditor>
                  				<f:facet name="output"><h:outputText value="#{material.unidad}" /></f:facet>
                  				<f:facet name="input"><p:inputText value="#{material.unidad}" style="width:100%"/></f:facet>
              				</p:cellEditor>
          				</p:column>
          				
          				<p:column id="cantidad" headerText="Cantidad">
              				<p:cellEditor>
                  				<f:facet name="output"><h:outputText value="#{material.cantidad}" /></f:facet>
                  				<f:facet name="input"><p:inputText value="#{material.cantidad}" style="width:100%"/></f:facet>
              				</p:cellEditor>
          				</p:column>
          				
          				<p:column id="precioUnitario" headerText="Precio Unitario">
              				<p:cellEditor>
                  				<f:facet name="output"><h:outputText value="#{material.precioUnitario}" /></f:facet>
                  				<f:facet name="input"><p:inputText value="#{material.precioUnitario}" style="width:100%"/></f:facet>
              				</p:cellEditor>
          				</p:column>
          				
          				<p:column id="costoTotal" headerText="Costo">
              				<h:outputText value="#{material.costo}" />
          				</p:column>          				
          				
						<p:column headerText="Opciones" colspan="1" style="width:100px">
    						<p:commandLink action="#{projectBean.deleteResource(material)}" update="resourceList" ajax="false">
           						<h:outputText value="X"  style="color: orange"/>           					
           					</p:commandLink>
   						</p:column>
   						
   						<p:columnGroup type="footer">
				            <p:row>
				                <p:column colspan="7" style="text-align:right" footerText="Total:" />
				                <p:column footerText="totalin" />				                
				            </p:row>
				        </p:columnGroup>   						
					</p:dataTable>	        		
	        	</p:fieldset>
		  	</p:tab>                            
	    </p:tabView>
	 </h:panelGrid>
</h:form>

<p:dialog id="modalDialog" appendTo="@(body)" style="font-size: 10.5px !important" header="Cambiar Nombre" widgetVar="renameDialog" modal="true" resizable="false" showEffect="clip" hideEffect="fold"  >
    			
 	<h:form id="frmRenameNode">
 	
 		<p:outputPanel id="renameNodePanel" >  
  			<p:message id="msgNewNodeName" for="newNodeName"/>
			<h:panelGrid columns="2" cellpadding="4" >  
   				<h:outputText value="Nuevo Nombre:" />
   				<p:inputText  id="newNodeName" value="#{projectBean.newNameNode}" required="true" requiredMessage="El nombre es requerido."/> 
   				<p:commandButton icon="ui-icon-check" value="OK" update=":frmNuevoProyecto:projectTree, renameNodePanel" oncomplete="handleDialogClose(xhr, status, args)" actionListener="#{projectBean.renameNode}"/>               				
			</h:panelGrid>  
		</p:outputPanel>
	</h:form>
</p:dialog>

	
<script type="text/javascript">

function simulate(obj) {
   var elem = (window.document.getElementById)? window.document.getElementById(obj) : window.document.all(obj);
   elem.click();
}

function summarize(tbl){
	var table = document.getElementById(tbl);    
	var rowCount = table.rows.length;    
	
	     alert(rowCount);	     
	
}
function handleDialogClose(xhr, status, args) {  
	if(!args.validationFailed) {
        PF('renameDialog').hide();
    }  
} 


</script>

</ui:composition>